<template>
  <!-- 参考：http://fabricjs.com/articles/ 、 https://www.opengps.cn/Map/Tools/PickUpGPS_AMap.aspx 、https://zhuanlan.zhihu.com/p/362831632 -->
  <div v-loading="loading" class="container" element-loading-text="加载中，请稍候">
    <header class="page-group-section page-footer">
      <section class="radio-group-wrap">
        <!-- <p class="formTitle">图标选择：</p> -->
        <el-radio-group v-model="radioVal" style="margin-bottom: 15px" @change="switchRadio">
          <el-radio-button label="operationIcon">
            <span class="panel-info">添加标记</span>
          </el-radio-button>
        </el-radio-group>

        <section>
          <p class="formTitle">提示信息：</p>
          <el-input v-model="infoWindowContent" v-validate="{ required: false, length: 255 }" type="textarea" :rows="4" name="infoWindowContent" :disabled="type >= 20"></el-input>
          <span v-if="errors.has('infoWindowContent')" class="tip is-danger">{{ errors.collect('infoWindowContent')[0] }}</span>
          <el-button class="save-info" type="primary" size="small" @click="saveInfoWindow()">保存提示信息</el-button>
        </section>

        <p class="formTitle location-container">定位（通过两个点确定第三个点在图片上的位置）：</p>
        <el-radio-group v-model="locationVal" style="margin-bottom: 15px" @change="locationRadio">
          <section class="location-section">
            <div>
              <el-radio-button label="APoint">
                <span class="panel-info">A点（阳光百合）</span>
              </el-radio-button>
              <div><el-input v-model="locationInfo.Alat" name="username" type="text" placeholder="请输入lat" /></div>
              <div><el-input v-model="locationInfo.Alng" name="username" type="text" placeholder="请输入lng" /></div>
              <div><el-input v-model="locationInfo.AXaxis" name="username" type="text" :readOnly="true" placeholder="请输入x轴坐标" /></div>
              <div><el-input v-model="locationInfo.AYaxis" name="username" type="text" :readOnly="true" placeholder="请输入y轴坐标" /></div>
            </div>

            <div>
              <el-radio-button label="BPoint">
                <span class="panel-info">B点（宝福大厦）</span>
              </el-radio-button>
              <div><el-input v-model="locationInfo.Blat" name="username" type="text" placeholder="请输入lat" /></div>
              <div><el-input v-model="locationInfo.Blng" name="username" type="text" placeholder="请输入lng" /></div>
              <div><el-input v-model="locationInfo.BXaxis" name="username" type="text" :readOnly="true" placeholder="请输入x轴坐标" /></div>
              <div><el-input v-model="locationInfo.BYaxis" name="username" type="text" :readOnly="true" placeholder="请输入y轴坐标" /></div>
            </div>
          </section>
        </el-radio-group>

        <p class="formTitle">操作：</p>
        <el-button class="save-info" type="primary" size="small" @click="handleDelete()">删除当前元素</el-button>
        <!-- <el-button class="save-info" type="primary" size="small" @click="handleRefresh()">刷新数据</el-button> -->
        <el-button class="save-info" type="primary" size="small" @click="loadData()">加载第三个点的数据（莲景花园）</el-button>
        <!-- <el-button class="save-info" type="primary" size="small" @click="checkData()">校验数据</el-button> -->
      </section>
    </header>

    <section style="display: none;">
      <img id="operationIcon" :src="require('@/assets/images/poi_marker_red.png')" />
    </section>

    <div class="content-wrapper">
      <div class="manager_detail">
        <canvas id="canvas" width="1720" height="1050"></canvas>
      </div>
    </div>

    <!-- <div v-show="infoWindow" :style="{ top: infoWindowAttr.top + topOffset + 'px', left: infoWindowAttr.left + leftOffset + 'px' }" class="infoWindow-wrap">{{ (infoWindowAttr && infoWindowAttr.info && infoWindowAttr.info.describe) || '' }}</div> -->
    <div
      v-if="infoWindow"
      :style="{
        top: topOffset + 'px',
        left: leftOffset + 'px'
      }"
      class="infoWindow-wrap"
    >
      {{ (infoWindowAttr && infoWindowAttr.info && infoWindowAttr.info.describe) || '' }}
    </div>

    <div slot="footer" class="footer">
      <el-button v-if="graphicPageType !== 20" type="primary" size="small" @click.stop="toJson">保存画布的json对象</el-button>
      <el-button v-if="graphicPageType !== 20" type="primary" size="small" @click.stop="loadFromJSON">从json对象中加载画布数据</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    bgImg: {
      type: Object
    },
    type: {
      type: Number // type 表单类型 0 新增 10 修改 20 查看
    },
    bind: {
      type: Object // bind 当前项目信息
    },
    projectFilePlane: {
      type: Object // 平面效果图数据
    }
  },
  data() {
    return {
      panning: false,
      canvas: null,
      oImg: null,

      topOffset: 0, // canvas离顶部的偏移量
      leftOffset: 0, // canvas离左侧模块的偏移量
      originTopOffset: -50, // canvas初始离顶部的偏移量
      originLeftOffset: 500, // canvas初始离左侧的偏移量

      loading: false,
      attachData: {},
      tabPosition: "left",
      attachCode: "projectAttachFloorPlan",

      imgUrl: "",
      width: 880,
      height: 1040,
      isDrawingMode: true,
      radioVal: "projectAttachFloorPlan",
      locationVal: "",
      infoWindow: false,
      infoWindowAttr: {
        top: 0
      },
      infoWindowContent: "",

      currentObject: null, // 当前选中的对象
      // canvasObjects: [], // 当前画布中的所有对象
      locationInfo: {
        Alat: "24.476261",
        Alng: "118.125266",
        AXaxis: "168.65384615384608",
        AYaxis: "116.84481994040783",
        Blat: "24.477004",
        Blng: "118.119687",
        BXaxis: "121.68829571942875",
        BYaxis: "112.05086389645179"
      },
      CPoint: {
        lng: "118.139138",
        lat: "24.477729"
      },
      /* locationInfo: {
        Alat: '24.478786',
        Alng: '118.123363',
        AXaxis: '645',
        AYaxis: '282',
        Blat: '24.478796',
        Blng: '118.123679',
        BXaxis: '12',
        BYaxis: '18'
      }, */
      APoint: null,
      BPoint: null
    };
  },
  /* computed: {
    APointLocationInfo() {
      return this.APoint
    }
  }, */
  watch: {
    APoint: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.locationInfo.AXaxis = newVal.aCoords.tl.x || "";
          this.locationInfo.AYaxis = newVal.aCoords.tl.y || "";
        }
      },
      deep: true,
      immediate: true
    },
    BPoint: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.locationInfo.BXaxis = newVal.aCoords.tl.x || "";
          this.locationInfo.BYaxis = newVal.aCoords.tl.y || "";
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {
    this.initCanvas();
  },
  methods: {
    // 初始化画布
    initCanvas() {
      // 1. 实例化canvas 画布
      this.canvas = new fabric.Canvas("canvas");
      // 2. 设置背景图片作为底图（这里导入图片使用require，不要 使用 '../../' 方式）
      // canvas.width / 4764  （4764 是我底图图片宽度）
      // canvas.height / 3367 （3367 是我底图图片宽度）
      this.canvas.setBackgroundImage(
        require("../../assets/images/testMap.png"),
        this.canvas.renderAll.bind(this.canvas),
        {
          scaleX: this.canvas.width / 4764,
          scaleY: this.canvas.height / 3367
        }
      );

      // fabric.Image.fromURL('http://data618.oss-cn-qingdao.aliyuncs.com/ys/3524/img/b.jpg', (oImg) => {
      //   // 缩小图像并翻转它，然后将其添加到画布上
      //   this.oImg = oImg
      //   oImg.scale(0.1).set({ id: '66666', info: { describe: '描述信息' } })
      //   this.canvas.add(oImg)
      // })

      // 鼠标移入事件
      this.canvas.on("mouse:over", obj => {
        if (
          obj &&
          obj.target &&
          obj.target.id &&
          obj.target.info &&
          obj.target.info.describe &&
          obj.target.lineCoords &&
          obj.target.lineCoords.tl
        ) {
          this.infoWindowAttr = {
            ...obj.target,
            top: obj.target.lineCoords.tl.y,
            left: obj.target.lineCoords.tl.x
          };

          this.topOffset = obj.target.lineCoords.tl.y + this.originTopOffset;
          this.leftOffset = obj.target.lineCoords.tl.x + this.originLeftOffset;
          this.infoWindow = true;
        }
      });
      // 鼠标移出事件
      this.canvas.on("mouse:out", obj => {
        this.infoWindow = false;
      });
      // 鼠标按下事件
      this.canvas.on("mouse:down", e => {
        this.panning = true;
        this.canvas.selection = false;

        if (e && e.target && e.target.id) {
          this.selected(e);
        }
      });
      // 鼠标抬起事件
      this.canvas.on("mouse:up", e => {
        this.panning = false;
        this.canvas.selection = true;
      });
      // 移动画布事件
      this.canvas.on("mouse:move", e => {
        if (this.panning && e && e.e && (!e.target || !e.target.id)) {
          // debugger
          let delta = new fabric.Point(e.e.movementX, e.e.movementY);
          this.canvas.relativePan(delta);
        }
      });
      // 鼠标滚动画布放大缩小
      this.canvas.on("mouse:wheel", e => {
        // debugger
        let zoom = (event.deltaY > 0 ? -0.1 : 0.1) + this.canvas.getZoom();
        zoom = Math.max(0.1, zoom); // 最小为原来的1/10
        zoom = Math.min(3, zoom); // 最大是原来的3倍
        let zoomPoint = new fabric.Point(event.pageX, event.pageY);
        this.canvas.zoomToPoint(zoomPoint, zoom);
      });

      // this.$nextTick(() => {
      //   setTimeout(() => {
      //     // this.oImg.scale(0.5)

      //     // this.oImg.set({ left: 120, top: 250 })
      //     // canvas.renderAll()

      //     console.log('---canvas.toJSON()---')
      //     console.log(canvas.toJSON())

      //     // this.oImg.on('mouse:down', function(e) {
      //     //   debugger
      //     //   if (this.panning && e && e.e) {
      //     //     let delta = new fabric.Point(e.e.movementX, e.e.movementY)
      //     //     // canvas.relativePan(delta)

      //     //     this.oImg.set(delta)
      //     //     canvas.renderAll()
      //     //   }
      //     // })
      //   }, 1000)
      // })
    },
    // 设置canvas背景图
    /* setCanvasBackgroundImage() {
      if (
        !(
          this.planeEffectPictureUploadAttachFiles &&
          this.planeEffectPictureUploadAttachFiles.length &&
          this.planeEffectPictureUploadAttachFiles[0] &&
          this.planeEffectPictureUploadAttachFiles[0].src
        )
      ) {
        // 设置背景图片
        // this.$refs.canvas.setBackgroundImage({})
        return;
      }

      this.canvas.setBackgroundImage(
        this.planeEffectPictureUploadAttachFiles[0].src,
        this.canvas.renderAll.bind(this.canvas),
        {
          scaleX: this.canvas.width / 4764,
          scaleY: this.canvas.height / 3367
        }
      );
    }, */

    async handleAdd(url, options) {
      // debugger
      // console.log('handleAdd')

      // let imgObj = await this.$refs.canvas.createImage(url, options)

      let imgInstance = new fabric.Image(url, options);
      this.canvas.add(imgInstance);

      /* fabric.Image.fromURL('operationIcon.png', (oImg) => {
        // 缩小图像并翻转它，然后将其添加到画布上
        this.oImg = oImg
        oImg.scale(0.1).set({ id: '66666', info: { describe: '描述信息' } })
        this.canvas.add(oImg)
      }) */

      /* console.log('---20220424 imgObj---')
      console.log(imgObj) */

      /* this.canvasObjects.push({
        id: options.id,
        info: options.info
      }) */

      /* this.$nextTick(() => {
        this.getCanvasObjects()
      }) */

      /* this.gettersTarget.on('rotating', arg => {
        this.angleValue = parseInt(arg.target.angle)
      }) */
    },
    // 切换
    switchRadio() {
      let options = {
        id: new Date(),
        info: {}
        // selectable: true
      };

      let imgElement = document.getElementById("operationIcon");

      this.handleAdd(imgElement, options);
    },
    // 定位
    locationRadio() {
      let options = {
        id: this.locationVal,
        width: 50,
        height: 60,
        info: {}
        // selectable: true
      };

      let imgElement = document.getElementById("operationIcon");

      // this.handleAdd(imgElement, options)
      let imgInstance = new fabric.Image(imgElement, options);
      this.canvas.add(imgInstance);

      this.$nextTick(() => {
        let objects = this.canvas.getObjects(); // 获取当前画布上的所有元素对象
        this[this.locationVal] = objects.find(item => {
          return item.id === options.id;
        });
      });
    },
    // canvas元素选中
    selected(obj, option) {
      // debugger
      /* if (obj.target.id === '20220424') {
        alert('20220424')
      } */
      if (
        obj &&
        obj.target &&
        obj.target.info &&
        obj.target.info.describe !== undefined
      ) {
        this.infoWindowContent = obj.target.info.describe;
      }

      this.currentObject = obj;

      if (
        this.currentObject.target &&
        (!this.currentObject.target.info ||
          !this.currentObject.target.info.describe)
      ) {
        this.currentObject.target.info = {
          describe: ""
        };
      }

      // this.$refs.canvas.setSelection(true)
      // console.log(obj);
      // console.log(option);
    },
    // 保存信息窗体提示信息
    saveInfoWindow() {
      // let currentObj = this.$refs.canvas.getEditObj()
      if (!this.currentObject) {
        this.$message.error(`请选择要添加提示信息的对象!`);
        return;
      }

      if (!this.infoWindowContent) {
        this.$message.error(`请选择要添加提示信息!`);
        return;
      }

      this.currentObject.target["info"]["describe"] = this.infoWindowContent;
      this.$message.success("提示信息添加成功!");

      let objects = this.canvas.getObjects(); // 获取当前画布上的所有元素对象
      let obj = objects.find(item => {
        return item.id === this.currentObject.target.id;
      });
      if (obj) {
        obj.info.describe = this.infoWindowContent;
      }
    },
    // 删除元素
    handleDelete() {
      if (!this.currentObject) {
        this.$message({
          showClose: true,
          type: "error",
          message: "请选择要删除的元素!"
        });
        return;
      }

      this.canvas.remove(this.currentObject.target);
      // this.canvas.renderAll()
      // this.canvas.removeCurrentObj()
      this.currentObject = null;
      // this.getCanvasObjects()
      this.$message({ showClose: true, type: "success", message: "删除成功!" });
    },
    // 刷新元素
    // handleRefresh() {
    //   if (!this.currentObject) {
    //     this.$message({
    //       showClose: true,
    //       type: "error",
    //       message: "请选择要刷新的元素!"
    //     });
    //     return;
    //   }

    //   // for (let i = 1; i <= 10; i++) {
    //   setInterval(() => {
    //     let objects = this.canvas.getObjects(); // 获取当前画布上的所有元素对象

    //     let obj = objects.find(item => {
    //       return item.id === "66666";
    //     });
    //     console.log("---obj---");
    //     console.log(obj);

    //     if (obj) {
    //       obj.set({ left: obj.left + 1, top: obj.top + 1 });
    //       this.canvas.renderAll();
    //     }
    //   }, 1000);
    //   // }
    // },
    // // 加载数据
    // loadData() {
    //   let point = {
    //     lng: 118.124322,
    //     lat: 24.480128
    //   }
    //   /* let point = {
    //     lng: 118.123579,
    //     lat: 24.47879
    //   } */

    //   let topRate = Math.abs(XEUtils.divide(this.locationInfo.AYaxis - this.locationInfo.BYaxis, this.locationInfo.Alng - this.locationInfo.Blng))
    //   let leftRate = Math.abs(XEUtils.divide(this.locationInfo.AXaxis - this.locationInfo.BXaxis, this.locationInfo.Alat - this.locationInfo.Blat))

    //   debugger
    //   // 先判断x轴
    //   let minObj = {
    //     axios: this.locationInfo.AXaxis,
    //     lat: this.locationInfo.Alat
    //   }
    //   let maxObj = {
    //     axios: this.locationInfo.BXaxis,
    //     lat: this.locationInfo.Blat
    //   }
    //   if (this.locationInfo.AXaxis - this.locationInfo.BXaxis > 0) {
    //     minObj = {
    //       axios: this.locationInfo.BXaxis,
    //       lat: this.locationInfo.Blat
    //     }

    //     maxObj = {
    //       axios: this.locationInfo.AXaxis,
    //       lat: this.locationInfo.Alat
    //     }
    //   }

    //   let left = 0
    //   if (minObj.lat - maxObj.lat > 0) {
    //     // 减
    //     /* console.log('--- maxObj.axios---')
    //     console.log(maxObj.axios)
    //     console.log('----((point.lat - maxObj.lat) * leftRate)---')
    //     console.log(-((point.lat - maxObj.lat) * leftRate)) */

    //     console.log('--- maxObj.axios---')
    //     console.log(maxObj.axios)
    //     console.log('---point.lat - maxObj.lat---')
    //     console.log(point.lat - maxObj.lat)
    //     console.log('----((point.lat - maxObj.lat) * leftRate)---')
    //     console.log(-((point.lat - maxObj.lat) * leftRate))
    //     let distance = (point.lat - maxObj.lat) * leftRate

    //     if (distance > 0) {
    //       left = maxObj.axios - Math.abs(point.lat - maxObj.lat) * leftRate
    //     } else {
    //       left = maxObj.axios + Math.abs(point.lat - maxObj.lat) * leftRate
    //     }
    //   } else {
    //     // 加
    //     left = minObj.axios + (point.lng - minObj.lng) * leftRate
    //   }

    //   // 再判断y轴
    //   minObj = {
    //     axios: this.locationInfo.AYaxis,
    //     lng: this.locationInfo.Alng
    //   }
    //   maxObj = {
    //     axios: this.locationInfo.BYaxis,
    //     lng: this.locationInfo.Blng
    //   }
    //   if (this.locationInfo.AYaxis - this.locationInfo.BYaxis > 0) {
    //     minObj = {
    //       axios: this.locationInfo.BYaxis,
    //       lng: this.locationInfo.Blng
    //     }

    //     maxObj = {
    //       axios: this.locationInfo.AYaxis,
    //       lng: this.locationInfo.Alng
    //     }
    //   }

    //   let top = 0
    //   if (minObj.lng - maxObj.lng > 0) {
    //     // 减
    //     top = maxObj.axios - (point.lng - maxObj.lng) * topRate

    //     let distance = (point.lng - maxObj.lng) * topRate

    //     if (distance > 0) {
    //       top = maxObj.axios - (point.lng - maxObj.lng) * topRate
    //     } else {
    //       top = maxObj.axios + (point.lng - maxObj.lng) * topRate
    //     }
    //   } else {
    //     // 加
    //     top = minObj.axios + (point.lng - minObj.lng) * topRate
    //   }

    //   console.log('---leftRate---')
    //   console.log(leftRate)
    //   console.log('---topRate---')
    //   console.log(topRate)

    //   let options = {
    //     id: uuidv4().replace(/-/g, ''),
    //     left: left,
    //     top: top,
    //     info: {}
    //     // selectable: true
    //   }

    //   console.log('---options---')
    //   console.log(options)

    //   let imgElement = document.getElementById('operationIcon')

    //   // this.handleAdd(imgElement, options)
    //   let imgInstance = new fabric.Image(imgElement, options)
    //   this.canvas.add(imgInstance)
    // },
    // 加载数据
    loadData() {
      let point = this.CPoint;
      /* let point = {
        lng: 118.123579,
        lat: 24.47879
      } */

      let topRate = Math.abs(
        XEUtils.divide(
          this.locationInfo.AYaxis - this.locationInfo.BYaxis,
          this.locationInfo.Alat - this.locationInfo.Blat
        )
      );
      let leftRate = Math.abs(
        XEUtils.divide(
          this.locationInfo.AXaxis - this.locationInfo.BXaxis,
          this.locationInfo.Alng - this.locationInfo.Blng
        )
      );

      let lngOffset = XEUtils.subtract(point.lng, this.locationInfo.Alng);
      let left = XEUtils.add(this.locationInfo.AXaxis, lngOffset * leftRate);

      let latOffset = XEUtils.subtract(point.lat, this.locationInfo.Alat);
      let top = XEUtils.subtract(this.locationInfo.AYaxis, latOffset * topRate);

      let options = {
        id: new Date(),
        left: left,
        top: top,
        width: 50,
        height: 60,
        info: {}
        // selectable: true
      };

      let imgElement = document.getElementById("operationIcon");

      // this.handleAdd(imgElement, options)
      let imgInstance = new fabric.Image(imgElement, options);
      this.canvas.add(imgInstance);
    },
    // 校验数据
    /* checkData() {
      let options = {
        id: uuidv4().replace(/-/g, ""),
        left: 391.8,
        top: 101.544312,
        info: {}
        // selectable: true
      };

      let imgElement = document.getElementById("operationIcon");

      // this.handleAdd(imgElement, options)
      let imgInstance = new fabric.Image(imgElement, options);
      this.canvas.add(imgInstance);
    }, */
    // 从 json 对象中加载画布数据
    loadFromJSON() {
      if (this.canvas) {
        // 清除当前画布上的所有元素对象
        this.canvas.clear();
      }

      let canvasJson = JSON.parse(localStorage.getItem("fabricjsJsonData"));
      if (canvasJson) {
        this.loading = true;
        this.canvas.loadFromJSON(canvasJson, () => {
          this.loading = false;
          /* this.$nextTick(() => {
            this.getCanvasObjects();
          }); */
        });
      }
    },
    // 返回当前画布的 json 对象
    toJson() {
      let canvasJson = this.canvas.toJSON(["id", "info"]);

      // let canvasObj = JSON.parse(canvasJson)

      /* canvasJson.objects.forEach((item, index) => {
        canvasJson.objects[index] = { ...item, ...this.canvasObjects[index] };
      }); */

      // canvasJson.bgImgInfo = (this.planeEffectPictureUploadAttachFiles && this.planeEffectPictureUploadAttachFiles.length && this.planeEffectPictureUploadAttachFiles[0]) || null

      // canvasJson = JSON.stringify(canvasObj)
      /* this.$emit('setGraphicData', canvasJson)
      this.$emit('closeGraphicEditDialog') */

      let data = JSON.stringify(canvasJson);
      localStorage.setItem("fabricjsJsonData", data);

      this.$message.success("保存成功!");

      console.log("最终要上传到后台的json数据：" + canvasJson);
    }
  }
};
</script>
<style scoped>
.manager_detail {
  width: 100%;
  /* height: calc(100vh - 112px); */
  height: 800px;
  padding-left: 500px;
  overflow: hidden;
}

.location-section {
  display: flex;
  align-items: center;
}
</style>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  margin: 15px;
  position: relative;

  // display: flex;
  // flex-direction: column;
  // padding-top: 120px;

  .header {
    height: 60px;

    border-bottom: 1px solid #efefef;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    box-sizing: border-box;
    width: 100%;

    .logo {
      width: 200px;
      box-sizing: border-box;
      border-right: 1px solid #efefef;
      height: 60px;
      display: -ms-flexbox;
      display: -moz-box;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      box-align: center;
      -moz-box-align: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      box-pack: center;
      -webkit--moz-box-pack: center;
      -moz-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
    }
  }

  .content-wrapper {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: flex;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;

    .tool-wrapper {
      position: absolute;
      top: 0;
      right: 0;
      display: -ms-flexbox;
      display: -moz-box;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;

      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      -moz-box-orient: vertical;
      -webkit-flex-direction: column;
      flex-direction: column;

      .pt-iconfont {
        padding: 20px 30px;
      }
    }
  }
}

.container-main {
  position: relative;
  padding-left: 450px;
}

.list-wraper {
  width: 200px;

  border-right: 1px solid #efefef;
  overflow-y: auto;
  flex-shrink: 0;
  box-sizing: border-box;

  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;

  .image-wrapper {
    padding: 20px;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    flex-shrink: 0;
    box-pack: center;
    -webkit--moz-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    box-align: center;
    -moz-box-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid #efefef;
    position: relative;
    img {
      width: 120px;
    }
    .pt-iconfont {
      position: absolute;
      top: 0px;
      right: 0px;
      font-size: 25px;
      color: #fff;
      padding: 10px;
    }
  }
}
</style>

<style lang="scss" scoped>
.view-header {
  .view-title {
    color: #fff;
  }

  /* /deep/.el-radio-button__inner {
    background: #10263f;
    // border: none;
  }
  /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #11435a !important;
    border-color: #1b586c !important;
    box-shadow: 0 0 0 0 #409eff;
  } */

  /* /deep/.el-radio-button:first-child .el-radio-button__inner {
    border-left: none;
  } */
}

/deep/.el-radio-button {
  margin-top: 15px;
  margin-right: 5px;
}

/deep/.el-radio-button:last-child {
  margin-right: 0;
}

/deep/.el-radio-button__inner {
  width: 211px;
  color: #fff;
  background: #10263f;
  border: none;
}
/* /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  border-color: #1b586c !important;
  box-shadow: 0 0 0 0 #409eff;

  background: url('~@/assets/images/selectBg.png') no-repeat;
  background-size: cover;
} */

/* /deep/.el-radio-button {
  &:last-child {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
  }
} */

/* /deep/.el-radio-button:first-child .el-radio-button__inner {
  border-left: none;
} */

.page-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.page-footer {
  display: flex;
  align-items: center;
  // justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.page-group-section {
  .view-title {
    color: #fff;
    font-size: 16px;
  }

  .radio-group-wrap {
    .panel-img {
      width: 18px;
    }

    .panel-info {
      margin-left: 20px;
    }
  }
}

.infoWindow-wrap {
  padding: 10px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  color: #000;
  z-index: 99999;
}

.save-info {
  margin-top: 5px;
}

.img {
  cursor: pointer;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.delImg {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
  font-size: 20px;
  color: red;
}
.img_k {
  border: 1px solid #a9a9a9;
  width: 150px;
  height: 150px;
  display: inline-block;
  position: relative;
  text-align: center;
  margin-right: 10px;
}

.location-container {
  margin-top: 50px;
}

.footer {
  text-align: center;
}
</style>
